
		<style>
		  @import url("//unpkg.com/element-ui@2.13.2/lib/theme-chalk/index.css");
		  .app{
		  		margin: 30px;
		  }
		  .avatar-uploader .el-upload {
		      border: 1px dashed #d9d9d9;
		      border-radius: 6px;
		      cursor: pointer;
		      position: relative;
		      overflow: hidden;
		    }
		    .avatar-uploader .el-upload:hover {
		      border-color: #409EFF;
		    }
		    .avatar-uploader-icon {
		      font-size: 28px;
		      color: #8c939d;
		      width: 178px;
		      height: 178px;
		      line-height: 178px;
		      text-align: center;
		    }
		    .avatar {
		      width: 178px;
		      height: 178px;
		      display: block;
		    }

		</style>
	</head>
	<body>
		<div class="uc_title m_10 tabs_menu">
	<label class="current node"><span>用户头像修改</span></label>
</div>
<div id="app">
	<el-upload
			class="avatar-uploader"
			action="/coach/updateAvatarByCid"
			:show-file-list="false"
			:on-success="handleAvatarSuccess"
			:before-upload="beforeAvatarUpload">
		<img v-if="imageUrl" :src="imageUrl" class="avatar">
		<i v-else class="el-icon-plus avatar-uploader-icon"></i>
	</el-upload>
</div>
	<script>
	var Main = {
		data() {
			return {
				imageUrl: ''
			};
		},
		methods: {
			handleAvatarSuccess(res, file) {
				this.imageUrl = URL.createObjectURL(file.raw);
				console.log(this.imageUrl);
			},
			beforeAvatarUpload(file) {
				const isJPG = file.type === 'image/jpeg';
				const isLt2M = file.size / 1024 / 1024 < 2;
				if (!isJPG) {
					this.$message.error('上传头像图片只能是 JPG 格式!');
				}
				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 2MB!');
				}
				return isJPG && isLt2M;
			}
		}
	}
	var Ctor = Vue.extend(Main)
	new Ctor().$mount('#app')
</script>
	</body>
</html>
